<template>
	<div class="main">
		<div class="edition">
			<div>
				<img src="@/assets/img/NewGood/img1.webp" alt="" />
			</div>
			<div class="recommend">
				<div class="recommend-left">
					<div class="recommend-left-line"></div>
					<i class="iconfont icon-lingxing"></i>
				</div>
				<div class="recommend-middle">
					<i class="iconfont icon-thumbup"></i>
					<h2>推荐关注</h2>
				</div>
				<div class="recommend-right">
					<i class="iconfont icon-lingxing"></i>
					<div class="recommend-left-line"></div>
				</div>
			</div>
			<div class="recommendList">
				<div class="hd">
					<img src="@/assets/img/NewGood/img2.webp" alt="" />
					<div class="hdtxt">
						<a href=""><div class="hdtxt1">双11省钱卡 花3元得42元红包</div></a>
						<div class="hdtxt2">￥3</div>
					</div>
					<div class="rcmdInfo">
						一笔回本 净赚￥39 尾款可用可叠券
						<div class="rcmdInfoBottom"></div>
					</div>
				</div>
				<GoodItem />
				<GoodItem />
				<GoodItem />
			</div>
			<div class="newGoods">
				<h1>全部新品</h1>
				<div class="area">
					<div class="region">分类：</div>
					<div class="regionCategory">
						<a href="" :class="regionIndex === -1 ? 'avtion' : ''">全部</a>
						<a href="" :class="regionIndex === 0 ? 'avtion' : ''">居家生活</a>
					</div>
				</div>
				<div class="area">
					<div class="Ranking">排序：</div>
					<div class="RankingCategory">
						<a
							href=""
							:class="rankingIndex === 0 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 0)"
							>全部</a
						>
						<a
							href=""
							:class="rankingIndex === 1 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 1)"
						>
							默认价格
						</a>
						<a
							href=""
							:class="rankingIndex === 2 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 2)"
							>上架时间</a
						>
					</div>
				</div>
				<Carousel :title="title" :goodList="dynamicList" />
			</div>
			<div>
				<h1>新品预告</h1>
				<Carousel :isShow="true" :goodList="dynamicList" />
			</div>
		</div>
	</div>
</template>

<script>
import GoodItem from "./components/GoodItem.vue"
import Carousel from "@/components/General/General.vue"
import { reqGetSearchList } from "@/api/index"
export default {
	components: {
		GoodItem,
		Carousel,
	},
	data() {
		return {
			// 选择地区
			regionIndex: -1,
			// 选择排序
			rankingIndex: 0,
			title: "本期新品",
			// 商品列表
			goodList: [],
			// 排序商品
			dynamicList: [],
			// 展示不同数据
			itemNumber: 0,
		}
	},
	async mounted() {
		const result = await reqGetSearchList()
		console.log(result)
		const goodList = result[this.itemNumber]
		this.goodList = goodList
		const itemList = [...goodList.categoryItemList[0].itemList]
		this.dynamicList = itemList.slice(0, 7).sort((a, b) => {
			// console.log(a.retailPrice, b.retailPrice)
			return a.retailPrice - b.retailPrice
		})
	},
	methods: {
		changeIndex(num, index) {
			// console.log(num, index)
			const _this = this
			const strategy = {
				1() {
					_this.attrIndex = index
					// console.log(num, index, this)
				},
				2() {
					_this.regionIndex = index
				},
				3() {
					_this.rankingIndex = index
					if (index === 1) {
						_this.priceranking = !_this.priceranking
					}
				},
			}
			strategy[num] && strategy[num]()
		},
	},
}
</script>

<style lang="less" scoped>
.avtion {
	color: #b4a078;
}
.main {
	width: 100%;
	background: #f5f5f5;
	.edition {
		margin: 0 auto;
		width: 1090px;
		img {
			width: 1090px;
		}
	}
	.recommend {
		display: flex;
		justify-self: space-between;
		width: 1090px;
		padding: 30px 0;
		.recommend-left,
		.recommend-right {
			display: flex;
			align-items: center;
		}
		.recommend-middle {
			display: flex;
			// flex-shrink: 0;
			padding: 0 36px;
			.iconfont {
				font-size: 34px;
			}
			h2 {
				font-size: 34px;
				padding-left: 14px;
			}
		}
		.recommend-left-line {
			border-bottom: 1px solid #ccc;
			width: 400px;
			height: 0;
		}
	}
	.recommendList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.hd {
			margin-right: 10px;
			position: relative;
			background: #fff;
			width: 540px;
			height: 450px;
			img {
				width: 340px;
				height: 340px;
				padding: 20px 100px 0;
			}
			.hdtxt {
				height: 25px;
				font-size: 18px;
				padding: 40px 20px 0px;
				.hdtxt1 {
					display: inline-block;
					color: #333;
					// font-size: 18px;
				}
				.hdtxt1:hover {
					color: #b4a078;
				}
				.hdtxt2 {
					display: block;
					float: right;
					color: #c34b4b;
				}
			}
			.rcmdInfo {
				position: absolute;
				top: 40px;
				right: 30px;
				width: 158px;
				padding: 8px 10px;
				border: 1px solid #ddd;
				color: #999;
				background: #fff;
				font-size: 14px;
				.rcmdInfoBottom {
					position: absolute;
					left: -1px;
					bottom: -7px;
					border: 8px solid #ddd;
					border-color: transparent transparent transparent #fff;
				}
			}
		}
	}
	.area {
		display: flex;

		padding: 16px 20px;
		font-size: 14px;
		border-bottom: 1px #000 dotted;
	}
	.region,
	.Ranking {
		color: #999;
	}
	.regionCategory a:hover,
	.RankingCategory a:hover {
		color: #b4a078;
		text-decoration: none;
	}
	.regionCategory a,
	.RankingCategory a {
		margin-right: 20px;
	}
	.newGoods {
		background: #fff;
		margin-bottom: 30px;
		h1 {
			font-size: 34px;
			text-align: center;
			padding-top: 40px;
			font-weight: 700;
		}
	}
}
</style>
